<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
	<link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">
	<script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
	<script src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
	<script src="http://g.alicdn.com/bui/bui/1.1.21/config.js"></script>
	<style>
	body {
		padding: 30px;
	}
	
	.row table {
		margin-left: 9px;
	}
	
	.row thead {
		background: #DFF0D8;
	}
	
	.row table th, .row table td {
		text-align: center;
	}
	
	.well {
		background: #DFF0D8;
		width: 97.7%;
	}
	
	button {
		margin-left: 30%;
	}
	</style>
</head>
<body>
	<!-- 模糊查询表单 -->
	<div class="well">
		<form class="" action="<%=basePath%>workflow/listPorcessDefination">
			<input type="text" class="control-text span-width"
				placeholder="流程定义名称…" name="keyword"
				value="<s:property value="#keyword"/>"> 
			<input type="submit" class="button button-info" 
				value="查询" style="margin-left: 30px;">
		</form>
	</div>
	
	<!-- 流程定义数据表格 -->
	<div class="row">

		<table class="table table-bordered">
			<!-- 表头 -->
			<thead>
				<tr>
					<th>编号</th>
					<th>流程名称</th>
					<th>流程定义的key</th>
					<th>版本</th>
					<th>流程定义的规则文件名称</th>
					<th>流程定义的规则图片名称</th>
					<th>流程部署id</th>
					<th>操作</th>
				</tr>
			</thead>
			<!-- 表体 -->
			<tbody>
				<!-- 迭代输出数据 -->
				<s:iterator value="#pageInfo.basePageList" var="defination">
					<tr>
						<td><s:property value="#defination.id"/></td>
						<td><s:property value="#defination.name"/></td>
						<td><s:property value="#defination.key"/></td>
						<td><s:property value="#defination.version"/></td>
						<td><s:property value="#defination.resourceName"/></td>
						<td><s:property value="#defination.diagramResourceName"/></td>
						<td><s:property value="#defination.deploymentId"/></td>
						<td>
							<a href="<%= basePath %>main/procedureShow.jsp?deploymentId=<s:property value='#defination.deploymentId'/>&imageName=<s:property value='#defination.diagramResourceName'/>" 
								class="show button" 
								style="border: 0px;">
								<i class="icon-black icon-edit"></i>
							</a>
						</td>
					</tr>
				</s:iterator>
			</tbody>
		</table>

		<div>

			<div class="pagination pull-right">
				<ul>
					<!-- 显示总记录数和总页数 -->
					<li class="disabled" style="letter-spacing:2px;">
						<a href="">
							总共<s:property value="#pageInfo.rootListSize"/>条/<s:property value="#pageInfo.pageCount"/>页
						</a>
					</li>

					<!-- 是否要上一页按钮 -->
					<s:if test="#pageInfo.nowPage>1">
						<li class="active">
							<a href="<%= basePath %>workflow/listPorcessDefination?targetPage=<s:property value="#pageInfo.nowPage - 1"/>">« 上一页</a>
						</li>
					</s:if>
					<s:else>
						<li class="disable">
							<a href="">« 上一页</a>
						</li>
					</s:else>
					
					<!-- 迭代输出每一页的页号 -->
					<s:iterator value="#pageInfo.pageNoList" var="page">
						<!-- 首先确保不是-1 -->
						<s:if test="#page != -1">
							<s:if test="#page != 0">
								<!-- 如果是当前页，特殊颜色显示 -->
								<s:if test="#page == #pageInfo.nowPage">
									<li class="active">
										<a href="<%= basePath %>workflow/listPorcessDefination?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#page"/>">
											<s:property value="#page"/>
										</a>
									</li>
								</s:if>
								
								<!-- 否则一般颜色显示 -->
								<s:else>
									<li>
										<a href="<%= basePath %>workflow/listPorcessDefination?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#page"/>">
											<s:property value="#page"/>
										</a>
									</li>
								</s:else>
							</s:if>
							<s:else>
								<li>
									<a href="<%= basePath %>workflow/listPorcessDefination?keyword=<s:property value="#keyword"/>&targetPage=1">...</a>
								</li>
							</s:else>
						</s:if>
					</s:iterator>
					
					<!-- 是否需要最后一页的按钮 -->
					<s:if test="#pageInfo.pageCount == #pageInfo.nowPage">
						<li class="disable">
							<a href="">下一页 »</a>
						</li>
					</s:if>
					<s:else>
						<li class="active">
							<a href="<%= basePath %>workflow/listPorcessDefination?keyword=<s:property value="#keyword"/>&targetPage=<s:property value="#pageInfo.nowPage + 1"/>">下一页 »</a>
						</li>
					</s:else>
				</ul>
			</div>
		</div>

	</div>

	<!-- 显示流程图的逻辑 -->
	<script type="text/javascript">
		$('.show').on('click', function() {

			var href = this.href;
			window.location.href = href;

		});
	</script>
</body>
</html>